<template>
  <div>
    <div id="search-page" :style="{
      paddingTop:(this.getSafeArea().top)+'px'
    }">
      <div class="search-top-bar" :style="{top:(this.getSafeArea().top)+'px'}">
        <i class="icon el-icon-arrow-left" @click="$router.back()"></i>
        <el-input class="keyword-input" v-model="searchKeywords" placeholder="请输入您要搜索的关键词"></el-input>
        <button class="search-button" @click="search()">搜索</button>
        <div class="c"></div>
      </div>

      <div id="search-history-box">
        <!--搜索历史提示-->
        <div class="history-title">
          <div class="left">搜索历史</div>
          <div class="right">
            <i class="el-icon-delete" @click="clear()"></i>
          </div>
          <div class="c"></div>
        </div>

        <!--搜索历史记录-->
        <div class="history-list" v-if="searchHistory.length>0">
          <div class="item" v-for="(name,index) in searchHistory" v-text="name" @click="setHotKeyWords(name)"></div>
          <div class="c"></div>
        </div>
        <div class="no-history" v-if="searchHistory.length==0">
          <span>暂无搜索历史....</span>
        </div>
      </div>


      <div id="search-history-box" class="hot" v-if="searchFromType==='Home'" style="margin-top: 30px">
        <!--搜索历史提示-->
        <div class="history-title">
          <div class="left">热门搜索</div>
          <div class="right">
<!--            <i class="el-icon-delete" @click="clear()"></i>-->
          </div>
          <div class="c"></div>
        </div>

        <!--搜索历史记录-->
        <div class="history-list">
          <div class="item" v-for="(name,index) in hotSearchKeyWords" v-text="name" @click="setHotKeyWords(name)"></div>
          <div class="c"></div>
        </div>
      </div>




    </div>
  </div>
</template>

<script>
import ProductListItem from "../common/ProductListItem";
export default {
  name: "SearchAct",
  components: {ProductListItem},
  data: function () {
    return {
      searchFromType:'Home',
      searchHistory:[],
      hotSearchKeyWords:dict.HotSearchKeyWords,
      searchKeywords: '',
    }
  },
  mounted () {
    this.searchFromType=this.$route.query.fromType
    if (this.$route.query.searchKeywords){
      this.searchKeywords=this.$route.query.searchKeywords
    }
    this.searchHistory=this.getHistory()
  },
  methods:{
    getLocalCacheKey:function () {
      if (this.searchFromType==='Home'){
        return "searchKeywordsList_"+this.searchFromType;
      }else{
        return "searchKeywordsList_"+this.searchFromType+"_"+this.$route.query.shopId;
      }

    },
    clear:function () {
      localStorage.setItem(this.getLocalCacheKey(),'[]')
      this.searchHistory=[]
      this.$forceUpdate()
    },
    setHotKeyWords:function (searchKeywords) {
      this.searchKeywords=searchKeywords
      this.search()
    },
    getHistory:function () {
      var searchKeywordsListString=localStorage.getItem(this.getLocalCacheKey())
      var searchKeywordsList=[]
      if (searchKeywordsListString){
        searchKeywordsList=JSON.parse(searchKeywordsListString)
      }
      return searchKeywordsList;
    },
    saveKeywordsHistory:function () {
      var list=this.getHistory()
      var isHas=false,$this=this
      list.forEach(function (value,index){
        if (value===$this.searchKeywords){
          isHas=true
        }
      })
      if (!isHas){
        list.push(this.searchKeywords)
        localStorage.setItem(this.getLocalCacheKey(),JSON.stringify(list))
      }
    },
    search:function (){
      if (this.searchKeywords.length===0 || !this.searchKeywords){
        // this.$message.error('请输入您要搜索的关键词')
        // return;
      }
      this.saveKeywordsHistory()
      if (this.searchFromType==='Home'){
        this.$router.push({
          name:'SearchResult',
          query:{
            searchKeywords:this.searchKeywords
          }
        })
      }
      if (this.searchFromType==='Shop'){
        this.$router.push({
          name:'ShopProduct',
          query:{
            id:this.$route.query.shopId,
            searchKeywords:this.searchKeywords
          }
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
